<template>
  <div class="form-container">
    <el-card class="box-card">
      <el-form :model="form" :rules="rules" ref="baseForm" label-width="120px">
        <div class="head-card">
          <div slot="header" class="clearfix">
            <span class="form-title">账号信息</span>
          </div>
          <!-- 负责人姓名 -->
          <el-form-item label="负责人姓名：" prop="user_name" class="required-item">
            <el-input
              v-model="form.base.user_name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>

          <!-- 职务岗位 -->
          <el-form-item label="职务岗位：" prop="user_dev" class="required-item">
            <el-input
              v-model="form.base.user_dev"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>

          <!-- 负责人手机号 -->
          <el-form-item label="负责人手机号：" prop="user_phoneno" class="required-item">
            <el-input
              v-model="form.base.user_phoneno"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </div>

        <div>
          <div slot="header" class="clearfix">
            <span class="form-title">基本信息</span>
          </div>
          <!-- 企业名称 -->
          <el-form-item label="企业名称：" prop="qyxx_name" class="required-item">
            <el-input
              v-model="form.qyxx.qyxx_name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>

          <!-- 经营类型 -->
          <el-form-item label="经营类型：" prop="qyxx_type">
            <el-select
              v-model="form.qyxx.qyxx_type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in businessTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 经营状态 -->
          <el-form-item label="经营状态：">
            <el-radio-group v-model="form.qyxx.qyxx_jyzt">
              <el-radio label="营业中"></el-radio>
              <el-radio label="停业中"></el-radio>
              <el-radio label="筹备中"></el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 经营地址 -->
          <el-form-item label="经营地址：">
            <el-input
              v-model="form.qyxx.qyxx_addr"
              placeholder="请输入经营地址"
            ></el-input>
          </el-form-item>
<!--          <el-form-item label="经营地址：">-->
<!--            <el-cascader-->
<!--              v-model="form.qyxx.qyxx_addr"-->
<!--              :options="addressOptions"-->
<!--              placeholder="省-市-区县"-->
<!--              style="width: 100%"-->
<!--            ></el-cascader>-->
<!--          </el-form-item>-->

          <!-- 详细地址 -->
          <el-form-item label="详细地址：">
            <el-input
              v-model="form.qyxx.qyxx_realaddr"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>

          <!-- 员工福利 -->
<!--          <el-form-item label="员工福利：" prop="employeeBenefits">-->
<!--            <el-select-->
<!--              v-model="form.employeeBenefits"-->
<!--              multiple-->
<!--              placeholder="请选择"-->
<!--              style="width: 100%"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in benefitOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <!-- 企业logo -->
          <el-form-item label="企业logo：">
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="https://jsonplaceholder.typicode.com/posts/"-->
<!--              :show-file-list="false"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--              :before-upload="beforeAvatarUpload">-->
<!--              <img v-if="logoImg" :src="logoImg[0].url" class="avatar">-->
<!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
<!--            <div class="upload-tip">建议尺寸：300×300px，支持JPG/PNG格式</div>-->
            <div class="demo-image__preview">
              <el-image
                style="width: 300px; height: 300px"
                :src="logoimgurl"
                :preview-src-list="srcList">
              </el-image>
            </div>
            <div class="upload-tip">建议尺寸：300×300px，支持JPG/PNG格式</div>
          </el-form-item>

         <!-- 企业门头 -->
          <el-form-item label="门头照片：">
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="https://jsonplaceholder.typicode.com/posts/"-->
<!--              :show-file-list="false"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--              :before-upload="beforeAvatarUpload">-->
<!--              <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">-->
<!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
            <div class="demo-image__preview">
              <el-image
                style="width: 300px; height: 300px"
                :src="doorimgurl"
                :preview-src-list="srcList">
              </el-image>
            </div>
            <div class="upload-tip">建议尺寸：300×300px，支持JPG/PNG格式</div>
          </el-form-item>

          <!-- 企业环境照片 -->
          <el-form-item label="企业logo：">
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="https://jsonplaceholder.typicode.com/posts/"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--              :before-upload="beforeAvatarUpload">-->
<!--              <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">-->
<!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
            <div class="demo-image__preview" v-for="(item,index) in inImgurl">
              <el-image
                style="width: 300px; height: 300px"
                :src="item.url"
                :preview-src-list="srcList">
              </el-image>
            </div>
            <div class="upload-tip">建议尺寸：300×300px，支持JPG/PNG格式</div>
          </el-form-item>


          <div class="foot-card">
            <div slot="header" class="clearfix">
              <span class="form-title">营业执照认证</span>
            </div>


            <!-- 营业执照照片 -->
            <el-form-item label="营业执照照片：">
<!--              <el-upload-->
<!--                class="avatar-uploader"-->
<!--                action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                :show-file-list="false"-->
<!--                :on-success="handleAvatarSuccess"-->
<!--                :before-upload="beforeAvatarUpload">-->
<!--                <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--              </el-upload>-->
              <div class="demo-image__preview">
                <el-image
                  style="width: 300px; height: 300px"
                  :src="zizhaoImg"
                  :preview-src-list="srcList">
                </el-image>
              </div>
              <div class="upload-tip">建议尺寸：300×300px，支持JPG/PNG格式</div>
            </el-form-item>

            <!-- 认证状态 -->
            <el-form-item label="认证状态：">
              <el-input
                v-model="form.base.flow_msg"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>



            <!-- 统一社会信用代码 -->
            <el-form-item label="统一社会信用代码：">
              <el-input
                v-model="form.yyzz.yyzz_code"
                placeholder="请输入统一社会信用代码"
              ></el-input>
            </el-form-item>

            <!-- 营业执照名称 -->
            <el-form-item label="营业执照名称：">
              <el-input
                v-model="form.yyzz.yyzz_name"
                placeholder="请输入营业执照名称"
              ></el-input>
            </el-form-item>

            <!-- 法人姓名 -->
            <el-form-item label="法人姓名：">
              <el-input
                v-model="form.yyzz.yyzz_username"
                placeholder="请输入法人姓名"
              ></el-input>
            </el-form-item>

            <!-- 注册地址 -->
            <el-form-item label="注册地址：">
              <el-input
                v-model="form.qyxx.qyxx_realaddr"
                placeholder="请输入注册地址"
              ></el-input>
            </el-form-item>


            <!-- 执照起始日期 -->
            <el-form-item label="执照起始日期：">
              <el-input
                v-model="form.yyzz.yyzz_startdate"
                placeholder="执照起始日期"
              ></el-input>
            </el-form-item>

            <!-- 执照有效日期 -->
            <el-form-item label="执照有效日期：">
              <el-input
                v-model="form.yyzz.yyzz_enddate"
                placeholder="执照有效日期"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- 表单操作 -->
        <el-form-item>
          <el-button type="primary" :disabled="isButtonDisabled" @click="reviewBy(form.base.flow_id)">审核通过</el-button>
          <el-button type="primary" @click="reviewNotBy(form.base.flow_id)">审核不通过</el-button>
<!--          <el-button type="primary" @click="reviewSave">保存</el-button>-->
<!--          <el-button @click="reviewCancle">取消</el-button>-->
        </el-form-item>
      </el-form>
    </el-card>

    <!--不通过弹窗 -->
    <el-dialog :visible.sync="editFormVisible"  width="40%" @click="closeDialog">
      <div style="margin-bottom: 10px" >
        <span class="form-title">不通过原因：</span>
      </div>
      <div>
        <el-input
          type="textarea"
          size="medium"
          :rows="5"
          v-model="unReview"
          placeholder="执照有效日期"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center; font-weight: bold;">
        <el-button size="small" @click="reviewUnBy">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {regjguserfail, regjguserpass} from "../../api/InstitutionApi";
import {defineComponent} from "vue";

export default {
  data() {
    return {
      // form: {
      //   companyName: '',
      //   businessType: '',
      //   businessStatus: '营业中',
      //   businessAddress: [],
      //   detailAddress: '',
      //   employeeBenefits: [],
      //   logoUrl: ''
      // },
      form: {},
      // 图片存储
      logoimgurl:'',
      doorimgurl:'',
      inImgurl: [],
      zizhaoImg: '',
      srcList:[],
      // logoImg:[
      //   {
      //     url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      //   }
      // ],
      // doorImg:[],
      // inImg:[],
      // zizhaoImg:[],
      // 弹窗存储
      editFormVisible: false,
      unReview:'',
      rules: {
        companyName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        businessType: [
          { required: true, message: '请选择经营类型', trigger: 'change' }
        ],
        employeeBenefits: [
          { type: 'array', required: true, message: '请至少选择一项员工福利', trigger: 'change' }
        ]
      },
      businessTypeOptions: [
        { value: 'manufacturing', label: '制造业' },
        { value: 'service', label: '服务业' },
        { value: 'retail', label: '零售业' },
        { value: 'it', label: '信息技术' }
      ],
      benefitOptions: [
        { value: 'insurance', label: '五险一金' },
        { value: 'bonus', label: '年终奖金' },
        { value: 'training', label: '培训发展' },
        { value: 'vacation', label: '带薪休假' }
      ],
      addressOptions: [
        {
          value: 'zhejiang',
          label: '浙江省',
          children: [
            {
              value: 'hangzhou',
              label: '杭州市',
              children: [
                { value: 'xihu', label: '西湖区' },
                { value: 'binjiang', label: '滨江区' }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏省',
          children: [
            {
              value: 'nanjing',
              label: '南京市',
              children: [
                { value: 'xuanwu', label: '玄武区' },
                { value: 'qinhuai', label: '秦淮区' }
              ]
            }
          ]
        }
      ]
    }
  },
  created() {
    // 对于 path: '/detail/:flowId' 的匹配

    this.form = this.$route.query.flowid;
    console.log('接收：', this.form);
    this.imgPhoto()
  },
  computed: {
    isButtonDisabled() {
      return this.form.base.cur_status === 2; // 可以扩展其他条件，如 || this.isLoading
    }
  },
  methods: {
    disabled() {
      return disabled
    },
    imgPhoto() {
      // 处理企业照片
      this.logoimgurl = this.form.qyxx.logo_img_uri[0].url
      this.srcList.push(this.logoimgurl)
      this.doorimgurl = this.form.qyxx.door_img_uri[0].url
      this.srcList.push(this.doorimgurl)
      this.inImgurl =  this.form.qyxx.in_img_uri
      for(var i=0;i<this.inImgurl.length;i++){
        this.srcList.push(this.inImgurl[i].url)
        console.log("inImgurl:", this.inImgurl[i].url)
      }
      this.zizhaoImg = this.form.yyzz.img_uri[0].url
      this.srcList.push(this.zizhaoImg)

      // const qyxxImg = this.form.qyxx.logo_img_url[0];
      // const newFiles = qyxxImg.map(item => ({
      //   name: 'logoimg',
      //   url: item.url, // 临时路径
      // }))
      //
      // // this.logoImg = []
      // this.logoImg = [...this.logoImg, ...newFiles];
      console.log("onchange-1:", this.inImgurl)
    },

    // 审核通过
    reviewBy(flowid) {
      // this.$refs.baseForm.validate((valid) => {
      //   if (valid) {
      //     // 这里添加表单提交逻辑
      //     console.log('提交数据:', this.form);
      //     this.$message.success('提交成功！');
      //   } else {
      //     console.log('表单验证失败');
      //     return false;
      //   }
      // });
      regjguserpass({
        "flowid": flowid
      }).then(res => {
        console.log('审核通过：',res);
        this.$router.push({
          path: '/enterprises/Management',
        });

      })
    },

    //审核不通过弹窗
    reviewNotBy(flowid) {
      this.editFormVisible = true
      // 传递参数flowid和理由
      // this.reviewUnBy(this.form.base.flow_id);
    },

    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    },


    // 审核不通过
    reviewUnBy(flowid){
      console.log('驳回-1：',flowid);
      regjguserfail({
        "flowid": flowid,
        "flowmsg": this.unReview,
      }).then(res => {
        console.log('驳回：',res,this.unReview);
        this.editFormVisible = false
      })
    },
    resetForm() {
      this.$refs.baseForm.resetFields();
      this.form.businessStatus = '营业中';
      this.form.logoUrl = '';
    },
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 20px auto;
}

.head-card {
  margin-bottom: 20px;
}

.form-title {
  font-size: 18px;
  font-weight: bold;
}

.required-item >>> .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}
</style>
